<template>
	<view class="content">
		<!-- <u-modal :show="show" :content='content'  :closeOnClickOverlay="true" @confirm="show = false" @close="show = false"></u-modal> -->
		<view class="section-0">
			<view class="top">
				<view class="user-info">
					<view class="logo">
						<image mode="aspectFill" src="../../../src/imgs/test.jpg"></image>
					</view>
					<view class="info">
						<view class="name">
							<view class="icon">
								<image mode="aspectFit" src="../../../src/imgs/account-icon-user.png"></image>
							</view>
							<text>{{userInfo.nick_name}}</text>
						</view>
						<view class="job">
							<view class="icon">
								<image mode="aspectFit" src="../../../src/imgs/account-icon-card.png"></image>
							</view>
							<text>{{curRole}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="section-1">
			<view class="form-item">
				<view class="label">旧密码</view>
				<view class="shape"></view>
				<view class="input">
					<u--input
						password
						placeholderClass="input-placeholder"
						class="input-body"
					    placeholder="请输入旧密码"
					    v-model="oldPassword"
					  ></u--input>
				</view>
			</view>
			<view class="form-item">
				<view class="label">新密码</view>
				<view class="shape"></view>
				<view class="input">
					<u--input
						password
						placeholderClass="input-placeholder"
						class="input-body"
					    placeholder="请输入新密码"
					    v-model="password"
					  ></u--input>
				</view>
			</view>
			<view class="form-item">
				<view class="label">确认密码</view>
				<view class="shape"></view>
				<view class="input">
					<u--input
						password
						placeholderClass="input-placeholder"
						class="input-body"
					    placeholder="请再次输入确认密码"
					    v-model="password2"
					  ></u--input>
				</view>
			</view>
			<view class="custom-button" @click="submit">提交</view>
		</view>
	</view>
</template>

<script>
	import { editPasswordApi } from '@/api/user.js';
	import { mapGetters, mapActions} from 'vuex';
	export default {
		data() {
			return {
				oldPassword: '',
				password: '',
				password2: '',
				// show: false,
				// content: ''
			};
		},
		computed: {
			...mapGetters({
				curRole: 'system/getCurRole', 
				userInfo: 'system/getUserInfo', 
			}),
		},
		methods: {
			async submit() {
				if (this.password == '' || this.password2 == '' || this.oldPassword == '') {
					uni.showToast(
						{title: "请输入密码", duration: 1000, icon: 'error' }
					);
					return;
				}
				if (this.password !== this.password2) {
					uni.showToast(
						{title: "两次密码不一致", duration: 1000, icon: 'error' }
					);
					return;
				}
				uni.showLoading({title: '加载中...'});
				const { data } = await editPasswordApi({id: this.userInfo.user_id, oldPassword: this.oldPassword, newPassword: this.password});
				if (data.code === 1) {
					uni.showToast(
						{title: '修改成功', duration: 1000, icon: 'success' }
					);
				} else {
					uni.showToast(
						{title: data.msg, duration: 1000, icon: 'error' }
					);
				}		
				uni.hideLoading();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popbody{
		width: 300rpx;
		height: 300rpx;
	}
	.custom-button{
		margin-top: 53rpx;
	}
	.section-0{
		width: 100%;
		background-color: #2e5efe;
		.top{
			width: 100%;
			height: 260rpx;
			background-image: url(../../../src/imgs/account-top.png);
			background-size: cover;
			background-repeat: no-repeat;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			overflow: hidden;
			.user-info{
				width: 100%;
				box-sizing: border-box;
				padding-left: 55rpx;
				padding-top: 35rpx;
				padding-bottom: 35rpx;
				.logo{
					width: 140rpx;
					height: 140rpx;
					background-color: #ffffff;
					border-radius: 14rpx;
					box-sizing: border-box;
					padding: 8rpx;
					float: left;
					image{
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}
				.info{
					float: left;
					padding-left: 35rpx;
					.name{
						.icon{
							float: left;
							margin-right: 35rpx;
							image{
								height: 50rpx;
								width: 35rpx;
							}
						}
						width: 100%;
						height: 50rpx;
						font-size: 35rpx;
						line-height: 50rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: #ffffff;
						margin-top: 20rpx;
						margin-bottom: 20rpx;
					}
					.job{
						width: 100%;
						height: 50rpx;
						.icon{
							float: left;
							margin-right: 35rpx;
							width: 35rpx;
							image{
								height: 50rpx;
								width: 35rpx;
							}
						}
						font-size: 35rpx;
						line-height: 50rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: #ffffff;
					}
				}
			}
		}
	}
	.section-1{
		width: 100%;
		height: calc(100vh - 450rpx);
		border-radius: 50rpx;
		background-color: #fafbfd;
		padding-top: 50rpx;
		padding-bottom: 20rpx;
		box-shadow: 0rpx -10rpx 29rpx 8rpx rgba(#bcbcb5, 0.19);
		position: relative;
		top: -50rpx;
		.form-item{
			width: 600rpx;
			height: 48rpx;
			border-radius: 20rpx;
			border: solid 2rpx #1534ce;
			margin: 0 auto;
			margin-bottom: 25rpx;
			&:last-child{
				margin-bottom: 34rpx;
			}
			@include clear();
			.label{
				float: left;
				width: 134rpx;
				height: 48rpx;
				text-align: center;
				line-height: 48rpx;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: #1534ce;
			}
			.shape{
				width: 3rpx;
				height: 32rpx;
				background-color: #7f98ae;
				float: left;
				margin-top: 8rpx;
			}
			.input{
				float: left;
				width: calc(100% - 134rpx - 3rpx);
				.input-body{
					box-sizing: border-box;
					width: 100%;
					height: 44rpx;
					padding: 0!important;
					border: none;
					padding-left: 30rpx!important;
					padding-right: 30rpx!important;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: rgba(0,0,0,0.7);
				}
				.input-placeholder{
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: rgba(0,0,0,0.5);
				}
			}	
		}
	}
</style>
